<template>
  <div class="main">
    <div class="top_title" :class="{'topActive':is_show.show}">
      <h3 class="wow" style="visibility: visible">
        <span><numberScroll :value="1000"></numberScroll>+</span>
        经典案例筑梦幸福家
      </h3>
      <div class="select wow" style="visibility: visible">
        <ul>
          <li :class="{'active':is_show.show&&show_num==0}" @click="upcate(0)">
            <p>风格</p>
            <img
              src=""
              islocal=""
            />
          </li>
          <li :class="{'active':is_show.show&&show_num==1}" @click="upcate(1)">
            <p>户型</p>
            <img
              src=""
              islocal=""
            />
          </li>
          <li :class="{'active':is_show.show&&show_num==2}" @click="upcate(2)">
            <p>面积</p>
            <img
              src=""
              islocal=""
            />
          </li>
        </ul> 
      </div>
      <ul :style="{display: show_num != 0?'none':''}">
        <li class="active"><p>全部</p></li>
        <li class=""><p>轻奢/现代/港式</p></li>
        <li class=""><p>中式/新中式/禅意</p></li>
        <li class=""><p>日式/侘寂/工业风</p></li>
        <li class=""><p>欧式/法式/地中海/美式</p></li>
      </ul>
      <ul :style="{display: show_num != 1?'none':''}">
        <li class="active"><p>全部</p></li>
        <li class=""><p>别墅</p></li>
        <li class=""><p>复式</p></li>
        <li class=""><p>大平层</p></li>
        <li class=""><p>工装</p></li>
      </ul>
      <ul :style="{display: show_num != 2?'none':''}">
        <li class="active"><p>全部</p></li>
        <li class=""><p>200㎡以下</p></li>
        <li class=""><p>200㎡-500㎡</p></li>
        <li class=""><p>500㎡以上</p></li>
      </ul>
    </div>
    <div class="bottom_con">
      <div class="cases wow" style="visibility: visible">
        <ul>
          <li>
            <div class="imgBox">
              <img
                src="https://www.shbotao.net//uploads/thumb/567_345/5291624c46f7524b691bc219bef4e06f.jpeg"
                alt=""
              />
            </div>
            <div class="content">
              <div class="top">
                <div class="topLeft">
                  <p>虹桥正荣府</p>
                </div>
                <div class="topRight">
                  <div class="love">
                    <img
                    src="/src/assets/img/xin.png"
                      alt=""
                      class="img img2"
                    />
                  </div>
                  <p class="pActive">
                    <span>272</span>
                    人喜欢
                  </p>
                </div>
              </div>
              <div class="concate">
                <p class="item1">
                    <i></i>
                    100-140㎡
                </p>
                <p class="item2">
                    <i></i>
                    四室两厅
                </p>
                <p class="item3">
                    <i></i>
                    四川省绵阳市
                </p>
              </div>
              <div class="bottom">
                <div class="bottomLeft">
                  <div class="imgBox2">
                    <img
                    src="/src/assets/img/touxiang.png"
                      alt=""
                    />
                  </div>
                  <div class="text">
                    <p>何倩</p>
                    <p>设计总监</p>
                  </div>
                </div>
                <div class="button-wrap">
                  <div class="btn" @click="toPage('jxdetail',1)">查看案例</div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div
        class="pagination-box wow"
        style="visibility: hidden; animation-name: none"
      >
      <el-pagination
        class="wow"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="prev, pager, next"
        :total="total"
        @current-change="handlePageChange"
      >
      </el-pagination>
      </div>
    </div>
    <div class="mask"  :class="{'maskActive':is_show.show}"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100) // 数据总条数
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
// 页码改变时的处理函数
const handlePageChange = (newPage) => {
  currentPage.value = newPage
  // 这里可以调用获取数据的方法，传入新的页码
}
const is_show = ref({show:false,index:0})
const show_num = ref(0)
const upcate = (index)=>{
    is_show.value.show = !is_show.value.show;
    if(is_show.value.index != index){
        is_show.value.show = true;
        is_show.value.index = index;
    }
    show_num.value = index
}
import { useRouter } from 'vue-router'
const router = useRouter()
const toPage = (page,id)=>{
  let data = {
    name:page,
  }
  if(id){
    data.query = {id:id}
  }
  router.push(data).then(()=>{
    window.scrollTo({
      top:0
    })
  })
}
</script>

<style>
.case-list {
  background-color: #fff;
  position: relative;
}

.case-list .main .top_title {
  padding: 0 0.3rem;
  position: absolute;
  left: 0;
  top: 9.2rem;
  z-index: 2;
  background-color: #fff;
  height: 2.54rem;
  border-radius: 0 0 0.2rem 0.2rem;
  overflow: hidden;
  transition: all 0.6s;
}

.case-list .main .top_title > h3 {
  font-size: 0.56rem;
  font-weight: 700;
  color: #000;
  margin-top: 0.99rem;
  opacity: 0;
  animation: slide-up-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
}

.case-list .main .top_title > h3 > span {
  display: inline-block;
  width: 1.68rem;
  font-family: Gilroy-Medium;
  color: #dd292c;
}

.case-list .main .top_title .select {
  display: flex;
  margin-top: 0.36rem;
  opacity: 0;
  animation: slide-up-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
}

.case-list .main .top_title .select > ul {
  display: flex;
}

.case-list .main .top_title .select > ul > li {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 0.86rem;
}

.case-list .main .top_title .select > ul > li p {
  font-size: 0.3rem;
  color: #000;
  font-weight: 700;
}

.case-list .main .top_title .select > ul > li img {
  margin-left: 0.1rem;
  width: 0.22rem;
  height: 0.11rem;
  transition: all 0.3s;
}

.case-list .main .top_title .select > ul .active img {
  transform: rotate(180deg);
}

.case-list .main .top_title > ul {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.7rem;
  opacity: 0;
  animation: fade-in 1s;
  animation-fill-mode: forwards;
}

.case-list .main .top_title > ul:first-of-type > li:nth-of-type(3) {
  text-align: left;
  padding-right: 0.3rem;
}

.case-list .main .top_title > ul:first-of-type > li:first-of-type {
  width: 1.4rem;
}

.case-list .main .top_title > ul:first-of-type > li:nth-of-type(4) {
  margin-left: 1.4rem;
}

.case-list .main .top_title > ul > li {
  font-size: 0.22rem;
  color: #666;
  margin-bottom: 0.15rem;
  width: 2.3rem;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.case-list .main .top_title > ul > li p {
  transition: all 0.2s;
  white-space: nowrap;
}

.case-list .main .top_title > ul > li:first-of-type {
  width: 2rem;
}

.case-list .main .top_title > ul > li:nth-of-type(4) {
  margin-left: 2rem;
}

.case-list .main .top_title > ul .active p {
  color: #dd292c;
  font-weight: 700;
}

.case-list .main .top_titleActive {
  height: 4.54rem;
}

.case-list .main .bottom_con{
  padding: 0 0.3rem;
  margin-top: 2.88rem;
  overflow: hidden;
}

.case-list .main .bottom_con .pagination-box {
  padding-bottom: 0.9rem;
}

.case-list .main .bottom_con .pagination-box .el-pagination {
  padding: 0;
}

.case-list .main .mask {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 7.5rem;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: all 0.3s;
  z-index: -1;
}

.case-list .main .maskActive {
  opacity: 1;
  z-index: 1;
}
.case-list .main .topActive{
    height: 4.54rem;
}

</style>